<html>
<head>
	<title>自助运维平台控制台v2.0</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<script src="../static/bootstrap/js/jquery-3.4.1.min.js" type="text/javascript"></script>
	<script src="../static/bootstrap/js/static-resources.js"></script>
</head>
<script type="text/javascript">
	$(function () {
		$(".headerPage").load("header.html", null, function(){
			app.setListenerOnTOP()
		});
		$(".footerPage").load("footer.html");

		let app = new Vue({
			el : '#app',
			data: {
				iframeSrc: "",
				iframeFlag: false,
				iframeHeight:"500px",

				tabs: [],
				currentTab: 0,
			},

			methods:{
				iframeListener(menu){
					this.iframeFlag = false;
					let openIndex = this.isOpened(menu);
					if (window.$TOP.isIframe(menu.url) && openIndex == -1) {
						let path = window.$TOP.go(menu.url);
						if (path) {
							this.tabs.push($.extend({path: path}, menu));
							this.$nextTick(()=>{
								this.iframeFlag = true;
								this.setIframeHeight();
								setTimeout(()=>{
									this.currentTab = this.tabs.length - 1;
								}, 30)
							})
						}
					} else {
						this.currentTab = openIndex;
					}
				},
				isOpened(menu) {
					let index = -1;
					for (let i=0; i < this.tabs.length; i++) {
						let tab = this.tabs[i];
						if (tab.name == menu.name) {
							index = i;
							break;
						}
					}
					return index;
				},
				linkClass(idx) {
					if (this.currentTab === idx) {
						return ['text-primary']
					} else {
						return ['text-secondary']
					}
				},
				setIframeHeight() {
					let windowHeight = $( window ).height();
					let headerPageHeight = $( '.headerPage' ).height();
					let tabNavHeight = $( '.index-tab-nav' ).height() || 41;
					this.iframeHeight = `${windowHeight - headerPageHeight - tabNavHeight}px`;
				},
				setListenerOnTOP(){
					this.$nextTick(()=>{
						window.$TOP.setIframeListener(this.iframeListener);

						// 默认打开 批次运行监控
						// this.iframeListener({name:"批次运行监控", url:"bpm-console/BatInstBatchList.html"});
						this.iframeListener({name:"首页", url:"admin/HomePage.html"});

						// load iframe if target is define
						let param = new URLSearchParams(window.location.search);
						if (param.get("target")) {
							let val = decodeURI(param.get("target"));
							this.$nextTick(()=>{
								this.iframeListener(val);
							});
						}
					})
				}
			},
			mounted(){
				$( window ).on('resize', this.setIframeHeight);
			},
			destroyed(){
				$( window ).off('resize', this.setIframeHeight)
			}
		})
	});

</script>
</head>
<body>
<div class="headerPage"></div>
<div id="app">
	<!--<div class="container" v-if="!iframeFlag">
		<b-row>
			<b-col align-h="start">
				<b-jumbotron header="欢迎使用调度管理控制台" lead="Bootstrap v4 Components for Vue.js 2">
					<p>For more information visit website</p>
					<b-button variant="primary" href="#">More Info</b-button>
				</b-jumbotron>
			</b-col>
		</b-row>

	</div>
	<div v-else :style="{ height: iframeHeight }">
		<iframe id="infoFrame" name="centerFrame" :src="iframeSrc"
				height="100%" width="100%" frameborder="0" scrolling="auto"></iframe>
	</div>-->

	<b-container fluid class="px-0">
		<b-tabs content-class="mt-1" nav-class="index-tab-nav" v-model="currentTab" >
			<b-tab v-for="(tab, index) in tabs"
				   :key="'dyn-tab-' + index"
				   :title="tab.name"
				   :title-link-class="linkClass(index)"
				   :iframe-url="tab.url">
				<div :style="{ height: iframeHeight }">
					<iframe name="tab.name" :src="tab.path" height="100%" width="100%" frameborder="0" scrolling="auto"></iframe>
				</div>
			</b-tab>
		</b-tabs>
	</b-container>
</div>
<div class="footerPage"></div>
</body>
</html>
